<template>
  <div>
    <!-- 头部 -->
    <div class="top_img">
      <i></i>
      <div>
        <h1>手机专享众筹超低价</h1>
        <p>下载four组APP可享</p>
      </div>
    </div>
    <!-- 项目发起人 -->
    <div class="Sponsor">
      <h1>项目发起人</h1>
      <hr>
      <Row>
        <i-col span="8"
               order="1">
          <img :src="getHead"
               class="head" />
        </i-col>
        <i-col span="14"
               order="2"
               class="sponsor_right">
          <h2>{{sponsor.nickname}}
            <Icon type="md-flame"
                  color="red"
                  title="实名认证"
                  style="margin-left:1vw;" />
            <Icon type="logo-github"
                  title="发起达人"
                  color="#FFA500" />
          </h2>
          <p class="sponsor_p1">{{sponsor.desc}}</p>
          <p class="sponsor_p2">发起<span>{{sponsor_count}}</span></p>
          <p><Button class="sponsor_btn"
                    @click="send_btn">发送私信</Button></p>
        </i-col>
      </Row>
    </div>
    <!-- 循环商品 -->
    <div class="shangPin"
         v-for="(item,index) in shangPin"
         :key="index">
      <p class="shangPin_p1">￥{{item.price}}<span>{{item.buyer}}位支持者</span></p>
      <hr>
      <h2 class="shangPin_h2">限额<span>2{{item.limit_num}}份</span><span>|</span>剩余<span>{{item.store_num}}</span>份</h2>
      <p class="shangPin_p2">{{item.desc}}</p>
      <p><img :src="item.pic"
             alt=""
             class="shangPin_img"></p>
      <p class="shangPin_p3">配送费用：<span>免运送费</span></p>
      <p class="shangPin_p3">预计回报发送时间:<span>项目众筹成功<b style="color:red;">{{item.day}}</b>天内</span></p>
      <p><Button class="shangPin_btn"
                @click="buy_btn(item)">支持￥{{item.price}}</Button></p>
    </div>
    <!-- 无私奉献 -->
    <div class="shangPin">
      <p class="shangPin_p1">无私奉献<span>102位支持者</span></p>
      <hr>
      <p class="shangPin_p2">不需要给回报，选择此项，项目成功后发起人将不会给您发送回报</p>
      <p><Button class="shangPin_btn"
                @click="zhiChi">无私支持</Button></p>
      <Modal v-model="moreMoney"
             title="请输入您支持的金额"
             width="370">
        <Form ref="formInline"
              :model="formInline"
              :rules="ruleInline"
              inline>
          <FormItem prop="user">
            <i-input type="text"
                     v-model="formInline.user"
                     placeholder="随意金额都行哦，亲~"
                     clearable>
              <Icon type="ios-person-outline"
                    slot="prepend"></Icon>
            </i-input>
          </FormItem>
          <FormItem>
            <Button type="primary"
                    @click="handleSubmit('formInline')">支付金额</Button>
          </FormItem>
        </Form>
        <div slot="footer"></div>
      </Modal>
    </div>
    <!-- 联系我们 -->
    <div class="shangPin">
      <p class="shangPin_p1">联系我们</p>
      <hr>
      <p class="shangPin_p3">公司名称：<span>超级无敌无限公司</span></p>
      <p class="shangPin_p3">联系地址：<span>天堂有路你不走，地狱无门你自来</span></p>
      <p class="shangPin_p3">官方电话：<span>7708801314520</span></p>
      <p class="shangPin_p3">工作时间：<span>工作日09：00-18：00</span></p>
    </div>
    <!-- 最新进程 -->
    <div class="shangPin">
      <p class="shangPin_p1">最新进程</p>
      <hr>
      <p class="shangPin_p3"
         v-for="(title,index) in jinCheng"
         :key="index">{{title.title}}</p>
    </div>
    <!-- 风险说明 -->
    <div class="shangPin">
      <p class="shangPin_p1">风险说明</p>
      <hr>
      <p class="shangPin_p3"> 1. 众筹不是商品交易。支持者根据自己的判断选择、支持众筹项目，与发起人共同实现梦想并获得发起人承诺的回报，众筹存在一定风险。</p>
      <p class="shangPin_p3"> 2. 京东众筹平台只提供平台网络空间、技术服务和支持等中介服务。京东作为居间方，并不是发起人或支持者中的任何一方，众筹仅存在于发起人和支持者之间，使用京东众筹平台产生的法律后果由发起人与支持者自行承担。</p>
    </div>
    <!-- 图片 -->
    <div class="left_img">
      <img src="https://img30.360buyimg.com/darkhouse/jfs/t1/125291/19/5114/28918/5eea43daEc8b1222e/12f6f5e59e4a2ae6.jpg">
    </div>
    <div class="left_img">
      <img src="https://img30.360buyimg.com/darkhouse/jfs/t1/111494/21/10522/21978/5eea43f7Ed9efa610/9f594aad64ec7e2c.jpg">
    </div>
    <!-- 猜你喜欢 -->
    <div class="shangPin">
      <p class="shangPin_p1">猜你喜欢<span @click="more"
              style="cursor: pointer;">更多</span></p>
      <hr>
      <p class="shangPin_p2"
         v-for="(title,index) in likeImg"
         :key="index"
         @click="toOther(title.gid)"><img :src="title.g_picture"
             class="liuLan_img"><span class="liuLan_span">{{title.g_name}}</span></p>
    </div>
    <!-- 订单 -->
    <Modal v-model="orderDiv"
           :mask-closable="false"
           :styles="{width: '923px'}"
           :closable="false"
           class-name="vertical-center-modal"
           id="modal_text">
      <p>
        <Steps :current="orderStep">
          <Step title="确认订单"></Step>
          <Step title="付款"></Step>
          <Step title="成功"></Step>
        </Steps>
      </p>
      <!-- 生成订单 -->
      <div v-show="orderTo">
        <p><span class="shangPin_h2">名称：</span>{{orderName}}</p>
        <p><span class="shangPin_h2">介绍：</span>{{orderDesc}}</p>
        <p><span class="shangPin_h2">价格：</span>￥{{orderPrice}}</p>
        <p style="margin-top:0"><i class="shangPin_h2">应付：</i>￥{{orderPrice}}</p>
        <p style="margin-top:0"><i class="shangPin_h2">运费：</i>￥0</p>
        <p style="margin-top:0"><i class="shangPin_h2">实付：</i>￥{{orderPrice}}</p>
      </div>
      <!-- 支付订单 -->
      <div v-show="orderBuy">
        <p><span class="shangPin_h2">提示：</span>余额是否充值呢?亲~</p>
        <p><span class="shangPin_h2">名称：</span>{{orderName}}</p>
        <p style="margin-top:0"><i class="shangPin_h2">支付：</i>￥{{orderPrice}}</p>
      </div>
      <!-- 支付成功 -->
      <div v-show="orderSuccess">
        <p>付款成功</p>
      </div>
      <!-- 缓冲 -->
      <div v-show="orderPro">
        <p style="text-align:center">订单生成中</p>
        <Progress :percent=pre
                  :stroke-width="20"
                  text-inside
                  :stroke-color="['#108ee9', '#87d068']" />
      </div>
      <div slot="footer">
        <Button :type="btnType"
                v-html="btnText"
                @click="closeOrder"
                v-show="orderClose">取消</Button>
        <Button @click="toOrder()"
                type="error"
                v-show="orderTo">生成订单</Button>
        <Button @click="playOrder"
                type="error"
                v-show="orderBuy">付款</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import { getDetail } from 'server/getDetail'
import { mapGetters } from 'vuex'
import { default_head } from 'common/config.js'

export default {
  data() {
    return {
      head_img: 'https://i.jd.com/commons/img/no-img_mid_.jpg',
      // sponsor:'本·拉登',
      sponsor: {},
      sponsor_text: '亚科维亚Y1光子高清投影墙纸，大屏...',
      sponsor_count: 2,
      shangPin: [
        {
          id: 1,
          price: 3,
          buyer: 30, //支持者
          limit_num: 140, //限额
          store_num: 110, //剩余
          desc:
            '下单即得该商品【满77元减5元优惠券】。另参与抽奖，支持者每满【77】人，抽取【1】位幸运用户（不满足时也抽取1位），获得【光子高清投影墙纸 简易型51吋*1张（颜色随机）】。',
          pic:
            'https://img30.360buyimg.com/cf/jfs/t1/110931/14/9462/44035/5eda2fa9E9c03f27e/6586d9f562493653.jpg',
          day: 30
        }
      ],
      imgItem: [
        'https://img30.360buyimg.com/cf/jfs/t1/120088/27/4527/51282/5edf08daE5164eb75/1ec524533c6cc589.jpg',
        'https://ae01.alicdn.com/kf/H1612874620af4fc79d6826e219b2770fH.jpg',
        'https://img30.360buyimg.com/cf/jfs/t1/143534/26/178/38595/5edda20fE6996fa69/c6b20749929ecec5.jpg',
        'https://img30.360buyimg.com/cf/jfs/t1/123827/8/3588/67076/5ed4790eE1e0da2a8/3c7158374e7dc7e4.jpg',
        'https://img30.360buyimg.com/cf/jfs/t1/141640/37/92/47075/5edb5d33E38430d01/43b470e72c9484d4.jpg'
      ],
      likeImg: [
        {
          g_picture:
            'https://img30.360buyimg.com/cf/jfs/t1/132383/6/1888/363507/5ee090ceE5b69f66c/ae9b5b1a6532cd69.jpg',
          g_name: 'Bigme智能办公本',
          gid: '12'
        },
        {
          g_picture:
            'https://img30.360buyimg.com/cf/jfs/t1/141678/22/448/142584/5ee20443E76e9ff35/f21a38683c10bddc.jpg',
          g_name: 'Bigme智能办公本',
          gid: '13'
        },
        {
          g_picture:
            'https://img30.360buyimg.com/cf/jfs/t1/143649/6/13/149939/5eda2aaaE980a3706/5eb450508c408b0c.jpg',
          g_name: 'Bigme智能办公本',
          gid: '14'
        }
      ],
      jinCheng: [
        {
          title: '进程1'
        },
        {
          title: '进程2'
        },
        {
          title: '进程3'
        }
      ],
      orderDiv: false,
      orderStep: 0, //进度
      orderName: '', //订单名称
      orderDesc: '', //订单简介
      orderPrice: 0, //订单价格
      order_id:1,//未支付订单号
      order_info: {}, //当前商品信息
      orderTo: true, //确认订单页面
      orderBuy: false, //支付页面
      orderSuccess: false, //支付成功页面
      btnType: 'info', //取消按钮支付前样式
      btnText: '取消',
      orderPro: false, //缓冲进度条
      pre: 0, //进度条
      orderClose: true, //取消按钮
      moreMoney: false, //无私支持
      wusi: '输入金额',
      formInline: {
        user: ''
      },
      ruleInline: {
        user: [
          { required: true, message: '请输入金额,亲~' },
          { pattern: /^[0-9]*$/, message: '请输入数字，亲~', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    buy_btn(item) {
      //订单
      if (this.$store.state.user.isLogin) {
        var them = this
        this.orderDiv = true
        this.orderName = item.name
        this.orderDesc = item.desc
        this.orderPrice = item.price
        this.order_info = item
      } else {
        this.$Message.error('请先登录')
      }
    },
    toOrder() {
      //生成订单
      var them = this
      this.$Modal.confirm({
        title: '是否下单？',
        content: '订单生成后需付款，付款成功后提交订单',
        onOk: function() {
          them.orderTo = false
          them.orderPro = true
          them.orderClose = false
          var preTime = setInterval(function() {
            if (them.pre >= 100) {
              clearInterval(preTime)
              them.pre = 0
              them.orderClose = true
              them.orderStep = 1
              them.orderPro = false
              them.orderBuy = true
            } else {
              them.pre++
            }
          }, 30)
          var data = {
            gid: parseInt(them.$route.query.gid),
            g_item_id: them.order_info.id,
          };
          getDetail('index/Getdetailitem/toOrder',data).then(res=>{
            if(res.err_code!=undefined){
              if(res.err_code==1000){
                them.order_id=res.data;
              }
            }
          });
        }
      })
    },
    playOrder() {
      //支付订单
      var them = this
      this.$Modal.confirm({
        title: '是否支付？',
        onOk: function() {
          var data = {
            gid: parseInt(them.$route.query.gid),
            money: them.order_info.price,
            order_id:them.order_id,
          }
          getDetail('index/Getdetailitem/order', data).then(res => {
            if (res.err_code == 1000) {
              them.$Message.success(res.message)
              them.orderStep = 2
              them.orderBuy = false
              them.orderSuccess = true
              them.btnType = 'success'
              them.btnText = '确认'
              them.$show.$emit('payOrderSuccess', res.data)
            } else {
              them.$Message.error(res.message)
            }
          })
        }
      })
    },
    closeOrder() {
      //关闭订单
      var them = this
      if (this.orderStep == 1) {
        this.$Modal.confirm({
          title: '是否取消该订单？',
          okText: '确定',
          onOk: function() {
            them.orderDiv = false
            them.orderBuy = false
            them.orderSuccess = false
            them.orderTo = true
            them.orderPro = false
            them.orderStep = 0
            them.btnType = 'info'
            them.btnText = '取消'
          }
        })
      } else {
        this.orderDiv = false
        this.orderBuy = false
        this.orderSuccess = false
        this.orderTo = true
        this.btnType = 'info'
        this.btnText = '取消'
        them.orderStep = 0
      }
    },
    send_btn() {
      if (!this.getIsLogin) {
        return this.$Message.error('请先进行登录')
      }
      if (this.getUserData.uid === this.sponsor.uid) {
        return this.$Message.error('无法给自己发送消息')
      }

      //发送私信

      this.$store.commit('frontChatShowing', {
        show: true,
        nowMen: {
          uid: this.sponsor.uid,
          nickname: this.sponsor.nickname,
          head: this.sponsor.head
        }
      })
    },
    zhiChi() {
      //支持按钮
      if (this.$store.state.user.isLogin) {
        this.moreMoney = true
      } else {
        this.$Message.error('请先登录')
      }
    },
    handleSubmit(name) {
      //无私支持
      this.$refs[name].validate(valid => {
        if (valid) {
          var them = this
          this.$Modal.confirm({
            title: '是否支付？',
            onOk: function() {
              var data = {
                money: them.formInline.user,
                gid: them.$route.query.gid
              }
              getDetail('index/Getdetailitem/wusi', data).then(res => {
                if (res.err_code == 1000) {
                  them.$Message.success(res.message)
                  them.moreMoney = false
                  them.$show.$emit('payWuSiSuccess', res.data)
                } else {
                  them.$Message.error(res.message)
                }
              })
            }
          })
        } else {
          this.$Message.error('Fail!')
        }
      })
    },
    more() {
      //更多
      this.$router.push({ path: 'home' })
    },
    toOther(Gid) {
      //猜你喜欢
      this.$router.push({
        path: '/front/detail',
        query: {
          gid: Gid
        }
      })
      location.reload()
    }
  },
  created() {
    
    var gidData = {
      id: parseInt(this.$route.query.gid)
    }
    getDetail('index/Getdetailitem/select', gidData).then(res => {
      if (res.err_code == 1000) {


        for (var i = 0; i < res.data[0].length; i++) {
          if(!res.data[0][i].pic ){
        
            res.data[0][i].pic = this.imgItem[i];
          }
        }
        this.shangPin = res.data[0]
        this.sponsor_count = res.data[2]
        if (res.data[1] != 0) {
          // this.head_img = res.data[1].head;
          // this.sponsor_text = res.data[1].desc;
          // this.sponsor = res.data[1].nickname;
        }
        const sponsorData = {
          desc: res.data[1].desc,
          head: res.data[1].head,
          nickname: res.data[1].nickname,
          uid: res.data[1].uid
        }
        this.sponsor = sponsorData

        //猜你喜欢
        this.likeImg = res.data[3]
      } else {
  
      }
    })
  },
  computed: {
    ...mapGetters(['getUserData', 'getIsLogin']),
    getHead() {
      return this.sponsor.head || default_head
    }
  }
}
</script>

<style scoped>
/* 该组件头部 */
.top_img {
  background-image: url('https://static.360buyimg.com/finance/crowdfunding/details/2.0.0/css/i/lead-ewm-bg.png');
  height: 10.34375vw;
  /* border: 1px solid; */
  background-size: 100%;
  background-repeat: no-repeat;
  background-color: #f9f9f9;
  position: relative;
}
.top_img i {
  display: inline-block;
  position: absolute;
  top: 2.3vw;
  left: 2vw;
  background-image: url(https://static.360buyimg.com/finance/crowdfunding/details/2.0.0/images/details-jrapp-ewm.png);
  width: 7.8vw;
  height: 10vw;
  background-size: 100%;
  background-repeat: no-repeat;
}
.top_img div {
  position: absolute;
  width: 11vw;
  height: 8vw;
  /* border: 1px solid red; */
  left: 11.6vw;
}
.top_img h1 {
  font-size: 1.2vw;
  margin-top: 3vw;
  color: #deb884;
}
.top_img p {
  font-size: 1.1vw;
  color: white;
  text-align: center;
}
/* 发起人 */
.Sponsor {
  height: 16vw;
  background-color: white;
  margin-top: 1vw;
  padding-top: 0.1vw;
}
.Sponsor h1 {
  margin-left: 1vw;
}
.Sponsor hr {
  margin-left: 1vw;
  margin-right: 1vw;
}
/* 头像 */
.head {
  /* border: 1px solid; */
  width: 6vw;
  height: 6vw;
  border-radius: 50%;
  margin-top: 1vw;
  margin-left: 0.6vw;
  cursor: pointer;
}
.sponsor_right h2 {
  margin-top: 1vw;
}
.sponsor_p1 {
  font-size: 1vw;
  color: #d1d1d1;
  margin-top: 1vw;
}
.sponsor_p2 {
  font-size: 1vw;
  margin-top: 1vw;
}
.sponsor_p2 span {
  margin: 1vw;
  color: black;
}
.sponsor_btn {
  width: 10vw;
  height: 2.5vw;
  margin-top: 1vw;
  background-color: #f1f1f1;
}
/* 商品 */
.shangPin {
  background-color: white;
  margin-top: 1vw;
  padding-top: 0.002vw;
  padding-bottom: 0.2vw;
}
.shangPin_p1 {
  font-size: 1.2vw;
  margin: 1vw;
}
.shangPin_p1 span {
  float: right;
  font-size: 0.1vw;
  line-height: 1.8vw;
}
.shangPin hr {
  margin-left: 1vw;
  margin-right: 1vw;
}
.shangPin_h2 {
  margin: 1vw;
  color: black;
}
.shangPin_h2 span {
  margin: 0.4vw;
}
.shangPin_p2 {
  font-size: 1vw;
  color: #95969a;
  padding-left: 1vw;
  padding-right: 1vw;
  margin-bottom: 1vw;
  margin-top: 2vw;
  cursor: pointer;
}
.shangPin_p2:hover {
  transform: scale(1.1);
}
.shangPin_img {
  width: 7vw;
  height: 7vw;
  margin-left: 1vw;
}
.shangPin_p3 {
  padding-left: 1vw;
  font-size: 1vw;
  color: #95969a;
  margin-top: 2vw;
}
.shangPin_p3 span {
  color: black;
  margin-left: 1vw;
  font-family: 宋体;
}
.shangPin_btn {
  width: 14vw;
  height: 3vw;
  margin: 1vw;
  font-size: 1.2vw;
  color: white;
  background-color: #00d9a6;
}
/* 图片 */
.left_img {
  margin-top: 1vw;
  cursor: pointer;
}
.left_img img {
  width: 100%;
}
/* 看了又看 */
.look_img {
  width: 100%;
  margin: 0.5vw;
}
.look_img:nth-child(2) {
  margin-left: 1.2vw;
}
/* 最近浏览 */
.liuLan_img {
  width: 5vw;
  height: 5vw;
}
.liuLan_span {
  position: relative;
  top: -2vw;
  left: 2vw;
}
/* 订单 */
.vertical-center-modal span {
  margin-right: 4vw;
  margin-left: 16vw;
}
.vertical-center-modal p {
  margin-top: 1vw;
}
.vertical-center-modal i {
  margin-left: 52vw;
}
</style>